# webpack 多页应用配置
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 多入口,分别为每页应用指定入口文件
entry: {
home: './src/index.js', // 为首页指定入口文件,并命名为 home
about: './src/about.js' // 为about页面指定入口文件,并命名为 about
},
output: {
filename: '[name].js', // [name]会使用入口文件指定的名字替换: home.js && about.js
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(), // 自动清理配置文件的 output 目录
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html', // 生成输出的文件名
chunks: ['home'] // 指定使用输出哪一个js模块,若不指定会将 output 输出的js全部加载
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/about.html'), // 要使用的模板文件,不指定则使用默认
filename: 'about.html', // 生成输出的文件名
chunks: ['about'] // 指定使用输出哪一个js模块,若不指定会将 output 输出的js全部加载
})
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27